<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件监听程序</title>
</head>
<body>
<h1>向相同元素添加不同类型的事件</h1>
<p>addEventListener() 方法在同一按钮上添加许多事件</p>
<button id="myBtn">放置</button>

<p id="demo"></p>
<script>
  var x = document.getElementById("myBtn");
  x.addEventListener("mouseover", myFunction);
  x.addEventListener("click", mySecondFunction);
  x.addEventListener("mouseout", myThirdFunction);

  function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>";
  }

  function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>";
  }

  function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>";
  }
</script>
</body>
</html>